<template>
  <vxe-modal @close="cancel" :loading="loading" title="选择关联合同" v-model="dialogVisible" width="70%" showFooter esc-closable show-zoom
             resize>
    <div style="height: 75vh; overflow-y: auto;">
      <!-- 顶部搜索 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="专利名称" prop="zlName">
          <el-input size="mini"
                    v-model="queryParams.zlName"
                    placeholder="请输入专利名称"
                    clearable
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="申请年度" prop="sqNd">
          <el-select size="mini" v-model="queryParams.sqNd" placeholder="请选择申请年度" clearable>
            <el-option
              v-for="dict in dict.type.year"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专利类型" prop="zlLx">
          <el-select size="mini" v-model="queryParams.zlLx" placeholder="请选择专利类型" clearable>
            <el-option
              v-for="dict in dict.type.zlsbnn_zllx"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属领域" prop="ssLy">
          <el-select size="mini" v-model="queryParams.ssLy" placeholder="请选择所属领域" clearable>
            <el-option
              v-for="dict in dict.type.kylx_ssly"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="依托工程" prop="ytGc">
          <el-input size="mini"
                    v-model="queryParams.ytGc"
                    placeholder="请输入依托工程"
                    clearable
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="专利发明人" prop="zlFmr">
          <el-input size="mini"
                    v-model="queryParams.zlFmr"
                    placeholder="请输入专利发明人"
                    clearable
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="申报单位" prop="sbDw">
          <el-input size="mini"
                    v-model="queryParams.sbDw"
                    placeholder="请输入申报单位"
                    clearable
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table @row-click="clickRow" ref="table" highlight-current-row
                :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                v-loading="loading" :data="zlList" @selection-change="handleSelectionChange">
        <!--      <el-table-column type="selection" width="55" align="center"/>-->
        <el-table-column label="序号" align="center" type="index" width="50"/>
        <el-table-column label="申请年度" align="center" prop="sqNd" width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.year" :value="scope.row.sqNd"/>
          </template>
        </el-table-column>
        <el-table-column label="专利名称" align="center" prop="zlName" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleButtonClick(scope.row)"
            >
              <el-link type="primary">{{ scope.row.zlName }}</el-link>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="依托工程" align="center" prop="ytGc" show-overflow-tooltip/>
        <el-table-column label="专利类型" align="center" prop="zlLx" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.zlsbnn_zllx" :value="scope.row.zlLx"/>
          </template>
        </el-table-column>
        <el-table-column label="所属领域" align="center" prop="ssLy" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.kylx_ssly" :value="scope.row.ssLy"/>
          </template>
        </el-table-column>
        <el-table-column label="申报单位" align="center" prop="sbDw" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.xmgl_lxwj_pzdw" :value="scope.row.sbDw"/>
          </template>
        </el-table-column>
        <el-table-column label="第一发明人" align="center" prop="dyFmr" show-overflow-tooltip/>
        <el-table-column label="其他发明人" align="center" prop="qtFmr" show-overflow-tooltip/>
        <el-table-column label="状态" align="center" prop="processStatus" width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.zl_lczt" :value="scope.row.processStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="专利号" align="center" prop="sqZlh" show-overflow-tooltip/>
        <el-table-column label="申请日期" align="center" prop="sqSqTime" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sqSqTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="授权日期" align="center" prop="sqTime" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sqTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button size="small" @click="submitForm">
        <svg-icon icon-class="confirm1" class-name='custom-class' />确 定
      </el-button>
      <el-button size="small" @click="cancel">
        <svg-icon icon-class="cancel1" class-name='custom-class' />取 消
      </el-button>
    </div>

    <!-- 专利详情 -->
    <ZlSbXq ref="zlSbXq"/>

  </vxe-modal>
</template>

<script>
import {selectZlListBySq} from "@/api/zscq/zlsb/zlsb";
import ZlSbXq from "@/views/zscq/zlgl/zlsb/components/ZlSbXq.vue";

export default {
  name: "ZlXzByZlLx",
  components: {ZlSbXq},
  dicts: ['xmgl_lxwj_pzdw', 'zlsb_qqfwjg', 'year', 'zlsbnn_zllx', 'kylx_ssly', 'zl_lczt'],
  inject: ['updateZlLabel'],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zlLx: null,
      },
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      selectedRow: null, // 保存当前选中的行
      zlList: [],
      zlLabel: null, //最后选择的专利

    }
  },
  created() {

  },
  methods: {
    // 查询详情信息
    handleButtonClick(row) {
      this.$refs.zlSbXq.handleOpen(row);
    },
    /** 自定义序号 */
    indexMethod(index) {
      let pageNum = this.queryParams.pageNum - 1;
      if ((pageNum !== -1 && pageNum !== 0)) {
        return (index + 1) + (pageNum * this.queryParams.pageSize);
      } else {
        return (index + 1)
      }
    },
    handleOpen(zlLx){
      this.dialogVisible = true;
      this.getList(zlLx);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList(zlLx) {
      this.loading = true;
      this.queryParams.zlLx = zlLx
      selectZlListBySq(this.queryParams).then(response => {
        this.zlList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    cancel() {
      this.dialogVisible = false
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      let ids = selection.map(item => item.zlsbId)
      if (ids.length === 1) {
        this.ids = ids[0]
      } else {
        this.ids = ids
      }
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    clickRow(row) {
      this.selectedRow = row; // 更新选中的行
      const table = this.$refs.table;
      const selectedRows = table.selection;

      // 否则取消之前选中的行，并选中当前点击的行
      selectedRows.forEach(selectedRow => {
        table.toggleRowSelection(selectedRow);
      });
      table.toggleRowSelection(row);
      this.zlLabel = this.selectedRow
    },
    submitForm(){
      this.updateZlLabel(this.zlLabel);
      this.dialogVisible = false;
    },

  }
}
</script>

<style scoped>

</style>
